const path = require('path');

// 打包时清除dist
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

// 打包时不生成LICENSE.txt
const TerserPlugin = require('terser-webpack-plugin');

// 将css单独打包的插件，用于替代 style-loader插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

//html打包
const HtmlWebpackPlugin = require('html-webpack-plugin');

// Webpack-dev-server的使用：引入webpack全局变量
const webpack = require('webpack');

var getHtmlConfig = function(name) {
    return {
      template: './src/view/' + name + '.html', // 指定打包的文件的来源（位置）
      filename: 'view/' + name + '.html', // 指定打包后的保存位置，不能用[name]这种方式传值
      // inject注入：自动识别引用的资源并注入，不需要另外在页面内引用，类似Spring IoC
      // 比如每次打包前在js中被引用了的东西，都无需在html中手动引用，打包后自动会在结果中（html中）生成引用
      inject  : true, 
      hash    : true, // 给个哈希值（版本号）进行文件的版本匹配
      chunks  : ['common', name], // 指定与之相关的入口，common的全局用法
      minify  : { // 指定不进行代码压缩
        collapseWhitespace : false
      }
    }
  }

module.exports  = {
    entry: { // 多页应用入口
        'index'                     : ['./src/page/index/index.js'],
        'login'                     : ['./src/page/login/index.js'],
        'common'                    : ['./src/page/common/index.js'],
        'catalog-main'              : ['./src/page/catalog-main/index.js'],
        'catalog-list'              : ['./src/page/catalog-list/index.js'],
        'catalog-item'              : ['./src/page/catalog-item/index.js'],
        'account-login'             : ['./src/page/account-login/index.js'],
        'account-myAccount'         : ['./src/page/account-myAccount/index.js'],
        'order-myOrders'            : ['./src/page/order-myOrders/index.js'],
        'order-viewOrder'           : ['./src/page/order-viewOrder/index.js'],
        'cart-myCart'               : ['./src/page/cart-myCart/index.js'],
        'order-newOrderForm'        : ['./src/page/order-newOrderForm/index.js'],
        'order-confirmOrder'        : ['./src/page/order-confirmOrder/index.js'],


    },
    devtool: 'inline-source-map', 
    output: {
      filename: 'js/[name].js', 
      path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        port: 8888, // 设定localhost的端口
        contentBase: path.resolve(__dirname, 'dist'), // 指定启动后打开的目录（部署的目录）为dist
    },
    module: {
        rules: [
          {// css打包参数
            test: /\.css$/, // 测试：指定对.css结尾的文件进行处理
            use : [
              {
                loader : MiniCssExtractPlugin.loader,
                options: {
                    publicPath : '../' // 指定css生成位置的路径
                }
              },
              'css-loader'
            ]
          },
          {// 图片的打包处理
            test: /\.(png|svg|jpg|gif)$/,
            // name=images/[name].[ext]指定在生成目录下新建一个images目录然后将1000Byte大小以上的图片写入[name].[ext]
            // url-loader专门处理css中图片的引用，其他的地方使用file-loader，用法类似
            use : {
                loader  : 'url-loader', 
                options : {
                  name      : 'images/[name].[ext]',
                  limit     : 10,
                  esModule  : false
                }
            },
            type: 'javascript/auto'  //file-loader、url-loader打包url引入一张图片生成两个图片，一个无法加载,在url-loader中设置type: 'javascript/auto’；
          },
          {// 通用类htm打包参数
            test: /\.(htm|string)$/, // 测试：指定对.htm结尾的文件进行处理
            use : [
            {
              loader : 'html-loader',
              options: {
                esModule  : false, // 加载时当成es6的对象进行加载，这里将htm的代替部分原封不动进行复制
                minimize  : false
              }
            }
            ]
        }
        ]
    },
    plugins : [//插件
        //new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css' // 指定dist目录下的css目录为保存位置
          }),
        new HtmlWebpackPlugin(getHtmlConfig('index')),
        new HtmlWebpackPlugin(getHtmlConfig('login')),
        new HtmlWebpackPlugin(getHtmlConfig('catalog-main')),
        new HtmlWebpackPlugin(getHtmlConfig('catalog-list')),        
        new HtmlWebpackPlugin(getHtmlConfig('catalog-item')),
        new HtmlWebpackPlugin(getHtmlConfig('account-login')),
        new HtmlWebpackPlugin(getHtmlConfig('account-myAccount')),
        new HtmlWebpackPlugin(getHtmlConfig('order-myOrders')),
        new HtmlWebpackPlugin(getHtmlConfig('order-viewOrder')),
        new HtmlWebpackPlugin(getHtmlConfig('cart-myCart')),
        new HtmlWebpackPlugin(getHtmlConfig('order-newOrderForm')),
        new HtmlWebpackPlugin(getHtmlConfig('order-confirmOrder')),

        // new HtmlWebpackPlugin(getHtmlConfig('account/account-signup')),
        new webpack.HotModuleReplacementPlugin()  // 开启热替换

    ],
    optimization: {
        minimize: false,
        minimizer: [
          new TerserPlugin({
            extractComments: false,//不将注释提取到单独的文件中
          }),
        ],
        splitChunks   : { // 公共模块代码的提取
            cacheGroups : { 
              commons   : { // commons是对自己写的公共代码进行配置
                name        : 'util', // 指定公共代码被打包之后的文件名
                chunks      : 'all',  // 指定需要被处理的代码类型
                minChunks   : 2, // 至少被2个及以上文件引用的代码则独立出来（被认为是公共部分）
                minSize     : 0 // 公共部分过小就不独立（而是直接挨个复制过去），这里不论公共部分多大都独立出来
              }
            }  
        }
    },
    externals: {
        'jquery': 'window.jQuery'
    },
    resolve : {
        alias : { // 定义别名
          util          : __dirname + '/src/util',
          page          : __dirname + '/src/page',
          images        : __dirname + '/src/images',
          service       : __dirname + '/src/service',
          node_modules  : __dirname + '/node_modules',
        }
      }
};
